<template>
  <div>
    <h2>Home:{{ $store.state.counter }}</h2>
    <h1>---mapState---</h1>
    <h3>Home:{{ sCounter }}</h3>
    <h3>Home:{{ sName }}</h3>
    <h3>Home:{{ age }}</h3>
    <h3>Home:{{ height }}</h3>
  </div>
</template>
<script>
//辅助函数
import { mapState } from "vuex";
export default {
  name: "",
  //没有其它计算属性时
  computed: {
    //数组用法
    ...mapState(["counter", "name", "age", "height"]),
    //对象用法
    ...mapState({
      //可以起别名防止data变量名冲突  他会传进来一个state
      sCounter: (state) => state.counter,
      sName: (state) => state.name,
    }),
  },
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>
<style>
</style>
